<template>
	<div :class="['submit-block', shoppingCart.length || 'submit-block_dis']">
		<view class="cart-icon">
			<image @click="$emit('onShoppingCart')" src="@/static/shopping-cart.png" mode="widthFix"></image>
			<p v-if="shoppingCart.length" class="count">{{shoppingCart.length}}</p>
		</view>
		<p class="price"><span>总计: </span>¥{{totalpPrice}}</p>
		<p :class="['submit', shoppingCart.length || 'submit_dis']" @click="submit">选好了</p>
	</div>
</template>

<script>
	import {mapGetters, mapMutations} from 'vuex'
	export default {
		name: 'submit-block',
		computed: {
			...mapGetters(['shoppingCart', 'totalpPrice'])
		},
		methods: {
			...mapMutations(['setShareIndent']),
			submit() {
				if (!this.shoppingCart.length) return
				const {shareOrderTimer, shareIndent} = this.$store.state.order
				const {userInfo} = this.$store.state.user
				if (shareOrderTimer) {
					console.log(111, shareIndent);
					if (userInfo.openid === shareIndent.user_id[0].openid) {
						uni.navigateTo({
							url: '/pages/indent-detail/indent-detail?id=' + shareIndent._id
						})
					} else {
						uni.showToast({
							title: '选完了，请订单发起人提交订单'
						})
					}
					clearInterval(shareOrderTimer)
					this.setShareIndent(null)
					this.$store.commit('clearShoppingCart', this.shoppingCart)
					return
				}
				uni.navigateTo({
					url: "/pages/place-an-order/place-an-order"
				})
			}
		}
	}
</script>

<style lang="scss">
	.submit-block_dis {
		background-color: #fff !important;
		image {
			filter: grayscale(1);
		}
		.price, .price span {
			color: #908e8e !important;
		}
	}
	.submit-block {
		width: 100%;
		height: 100rpx;
		background: white;
		position: fixed;
		left: 50%;
		bottom: 0;
		transform: translateX(-50%);
		z-index: 999;
		box-shadow: 2rpx 2rpx 16rpx #e0e0e0;
		display: flex;
		align-items: center;
		
		.cart-icon {
			position: relative;
			
			image {
				width: 100rpx;
				height: 100rpx;
				margin-left: 40rpx;
			}
			
			.count {
				position: absolute;
				right: 0rpx;
				top: 10rpx;
				min-width: 24rpx;
				height: 24rpx;
				font-size: 18rpx;
				text-align: center;
				line-height: 24rpx;
				background-color: #F56C6C;
				border-radius: 40rpx;
				padding: 0 6rpx;
				color: white;
			}
		}
		
		.price {
			margin-left: 10rpx;
			font-size: 36rpx;
			font-weight: bold;
			color: red;
			
			span {
				color: black;
				font-size: 26rpx;
				margin-right: 10rpx;
			}
		}
		
		.submit {
			width: 170rpx;
			height: 100%;
			line-height: 100rpx;
			text-align: center;
			color: white;
			background-color: $uni-theme-color;
			margin-left: auto;
			font-size: 32rpx;
			transition: all .3s ease;
		}
		
		.submit_dis {
			background-color: #e0e0e0;
		}
	}
</style>